<div id="contacts_page" class="page">
  <section class="content-header">
    <h1 data-i18n="contacts">Contacts</h1>
    <div style="position:absolute;top:9px;right:9px;">
      <button id="add_contact_button" type="button" class="btn btn-default" data-toggle="modal" data-target="#add_contact_modal" data-i18n="add_contact">Add Contact</button>
      <button id="export_contacts_button" type="button" class="btn btn-default" data-i18n="export_contact">Export Contacts</button>
      <input type="file" id="import_contacts_button_field" />
      <button id="import_contacts_button" type="button" class="btn btn-default" data-i18n="import_contact">Import Contacts</button>
    </div>
  </section>
  <section class="content">
    <div id="contact_page_database_error" style="display:none" data-i18n="contacts_no_db">Your browser does not support database access, without which contacts cannot be created.</div>
    <div class="data-container data-loading" id="contacts_table_container">
      <table class="table table-striped" id="contacts_table">
        <thead>
          <tr>
            <th data-i18n="name">Name</th>
            <th data-i18n="account_id">Account ID</th>
            <th data-i18n="email_address">Email Address</th>
            <th data-i18n="description">Description</th>
            <th data-i18n="actions" style="width:10%">Actions</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <div class="data-loading-container"><i class="fas fa-circle-notch fa-spin fa-3x" style="display: block;"></i></div>
      <div class="data-empty-container">
        <p data-i18n="[html]no_contacts_yet">No contacts yet, <a href="#" data-toggle="modal" data-target="#add_contact_modal">add one.</a></p>
      </div>
    </div>
  </section>
</div>